<template>
  <div @click.stop="() => {}">
    <a-popover v-if="!conditionData.filterColumnName" trigger="click" :arrow-point-at-center="false">
      <a-button type="link" class="button-tips">
        {{ t('tips.selectField') }}
      </a-button>

      <template #content>
        <field-select-tree class="field-selector" :field-list="fieldList" @selectField="handleSelectField" />
      </template>
    </a-popover>

    <div v-else class="condition-block">
      <!-- 条件过滤的字段名称 -->
      <div class="condition-field condition-config-item" @click="handleSelectCondition">
        {{ currentFieldInfo.title }}
      </div>
      <!-- 条件过滤的过滤类型 -->
      <a-select
        v-model:value="conditionData.conditionType"
        class="condition-type condition-config-item"
        @change="handleConditionTypeChange"
      >
        <a-select-option
          v-for="(optionText, optionValue) in conditionTypeOptions"
          :key="optionValue"
          :value="optionValue"
        >
          {{ optionText }}
        </a-select-option>
      </a-select>

      <!-- 条件过滤的内容 -->
      <condition-form
        class="condition-config-item"
        :column-info="currentFieldInfo"
        :condition-data="conditionData"
        :dynamic-field-list="dynamicFieldList"
        :filter-dynamic-field-func="filterDynamicFieldFunc"
      />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch, computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  import ConditionForm from './conditionForm.vue'
  import { getComponentDefaultValue, ComponentConditionTypeMap } from './conditionFormConfig'
  import FieldSelectTree from './fieldSelectTree.vue'

  export default defineComponent({
    name: 'ConditionConfig',
    components: {
      ConditionForm,
      FieldSelectTree
    },
    props: {
      // 配置文件
      conditionConfig: {
        type: Object as PropType<FormItemVisibleConditionData>,
        default: () => ({})
      },
      /**
       * 需要传入的数据
       */
      fieldList: {
        type: Array as PropType<FiledListType[]>,
        default: () => []
      },
      // 动态值下拉字段
      dynamicFieldList: {
        type: Array,
        default: () => []
      },
      filterDynamicFieldFunc: {
        type: Function as PropType<(columnInfo: FiledListType, fieldList: FiledListType[]) => FiledListType[]>
      }
    },
    emits: ['selectCondition'],
    setup(props, { emit }) {
      const { t } = useI18n()

      const conditionData = ref<FormItemVisibleConditionData>({
        filterColumnName: '',
        componentKey: '',
        conditionType: '',
        dateFormat: '',
        value: null
      })

      /**
       * 整理数据格式
       * 数组转对象 以item.filterColumnName为key
       */
      const fieldMap = computed(() => {
        const fieldMap = {}
        props.fieldList.forEach(item => {
          fieldMap[item.filterColumnName] = item
        })
        return fieldMap
      })

      /**
       * 当前字段的信息
       */
      const currentFieldInfo = computed<FiledListType>(() => {
        const { filterColumnName } = conditionData.value || {}
        if (!filterColumnName) {
          return {}
        }
        return fieldMap.value[filterColumnName] || {}
      })

      const conditionTypeOptions = computed(() => {
        if (!currentFieldInfo.value.type) {
          return {}
        }
        return ComponentConditionTypeMap[currentFieldInfo.value.componentKey]
      })

      watch(
        () => props.conditionConfig,
        () => {
          conditionData.value = props.conditionConfig || {
            filterColumnName: '',
            componentKey: '',
            conditionType: '',
            value: null
          }
        },
        {
          immediate: true,
          deep: true
        }
      )

      /**
       * 点击字段标题暴露后暴露给父组件
       */
      const handleSelectCondition = () => {
        emit('selectCondition')
      }

      /**
       * 字段选择后更新数据, 显示可选条件选择框
       */
      const handleSelectField = (fieldInfo: FiledListType) => {
        const { filterColumnName, componentKey, type } = fieldInfo
        conditionData.value.filterColumnName = filterColumnName
        conditionData.value.componentKey = componentKey
        conditionData.value.type = type
      }

      /**
       * 组件条件发生变化的回调
       */
      const handleConditionTypeChange = () => {
        const { componentKey, fixedAndDynamic } = currentFieldInfo.value
        const { conditionType } = conditionData.value
        /**
         * +++++++++++++++++++++++
         * 条件不是空或者非空，且需要显示固定值和动态值的时候使用动态值和固定值组件
         * +++++++++++++++++++++++
         */
        const showFixedAndDynamic = fixedAndDynamic && !['IS_NULL', 'IS_NOT_NULL'].includes(conditionType)
        conditionData.value.value = getComponentDefaultValue(componentKey, conditionType, showFixedAndDynamic)
      }

      return {
        t,
        conditionData,
        currentFieldInfo,
        conditionTypeOptions,
        handleSelectCondition,
        handleConditionTypeChange,
        handleSelectField
      }
    }
  })
</script>

<style lang="less" scoped>
  @gutter: 15px;

  .button-tips {
    height: 16px;
  }

  .field-selector {
    height: 300px;
    overflow: auto;
  }

  .condition-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: -@gutter;

    .condition-config-item {
      margin-top: @gutter;
    }
  }

  .condition-field {
    margin-left: @gutter;
    width: 100px;
    cursor: pointer;
  }

  .condition-type {
    margin: 0 @gutter;
    width: 106px;
  }
</style>

<i18n>
zh-CN:
  tips:
    selectField: '请选择字段'
</i18n>
